<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="referrer" content="no-referrer" />
      <title>购物车</title>
      <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link rel="stylesheet" href="./stylesheets/carts.css">
</head>

<body>

      <nav class="navbar navbar-default">
            <div class="container-fluid">
                  <div class="navbar-header">
                        <a href="./index.html">回首页</a>
                  </div>
            </div>
      </nav>

      <div class="container">
            <div class="row">
                  <div class="col-md-12 shop-list">
                        
                  </div>
            </div>
      </div>



      <div class="container mt10">
            <div class="jumbotron">
                  <ul class="goods-list">
                        
                  </ul>
            </div>
      </div>


      <div class="carts">
            <!-- 购物车图标 -->
            <div class="carts-img">
                  <span class="glyphicon glyphicon-shopping-cart carts-icon"></span>
                  <span class="count">0</span>
            </div>
            <!-- 购物车列表 -->
            <ul class="carts-list">
                 
            </ul>
      </div>

      <script>
                        
                        // 前端购物车 ;  所有购物车的业务逻辑都放在前端, 只是在渲染之后顺便通知一下后端。  优势就是快。 不可靠。
                        // localStorage => 有同源策略; 只有当前域名下设置的 localstroage 才可以互相访问;
      </script>

      <script src="./scripts/libs.js"></script>
      <script src="./scripts/carts.js"></script>

</body>

</html>